<template>
  <div class="table-tainer">
    <div class="alert-table-info-container">
      <a-alert show-icon>
        <template slot="message">
          <span style="margin-right: 12px">已选择: <a style="font-weight: 600">{{ selectedRowKeys.length }}</a></span>
          <a @click="selectChangeReset">清空</a>
        </template>
      </a-alert>
    </div>

    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      v-bind="tableProps"
      :scroll="{ x: '600px' }"
      row-key="id"
    />
  </div>
</template>

<script>
import { addGroupUsers } from '@/api/flow/group'
import { getUsers } from '@/api/flow/user'
import table from '@/utils/mixins/table'

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 60,
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '账号',
    dataIndex: 'username',
  },
  // {
  //   title: '职位',
  //   dataIndex: 'position_name',
  // },
  // {
  //   title: '部门',
  //   dataIndex: 'department_name',
  // },
  // {
  //   title: '角色',
  //   dataIndex: 'role',
  // },
  {
    title: '手机号',
    dataIndex: 'mobile',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
  },
]

export default {
  mixins: [table],

  data () {
    return {
      columns,
      selectedRowKeys: [], // Check here to configure the default column
    }
  },

  created () {
    this.tableHooksRequest()
  },

  computed: {
    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, this.tableArgs]
    },

    gid () {
      return this.$route.params.gid
    },
  },

  methods: {
    // 群组添加人员
    addGroupUsers () {
      const uids = this.selectedRowKeys

      return new Promise((resolve, reject) => {
        if (uids.length <= 0) {
          resolve(uids)
          return false
        }

        addGroupUsers(this.gid, { uid: uids })
          .then(data => {
            resolve(data)
          })
          .catch(error => {
            reject(error)
          })
          .finally(() => {
            this.selectChangeReset()
          })
      })
    },

    // SelectChange
    selectChangeReset () {
      this.$nextTick(() => {
        this.selectedRowKeys = []
      })
    },

    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    async tableHooksRequest () {
      try {
        const res = await this.getTableDatas(getUsers, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },
  },
}

</script>

<style lang="scss" scoped>
</style>
